<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <title>云盘</title>
    <link rel="stylesheet" href="${ctx}/res/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctx}/res/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="${ctx}/css/index.css"/>
    <script src='${ctx}/res/lib/jquery-3.4.0.min.js' type="text/javascript"></script>
    <script src='${ctx}/res/layui/layui.all.js' type="text/javascript"></script>
    <script src='${ctx}/js/common/popup.js' type="text/javascript"></script>
    <script src='${ctx}/js/ajax-collections.js' type="text/javascript"></script>
    <script src='${ctx}/res/lib/vue.js' type="text/javascript"></script>
</head>
<body>
<div id="container" class="container" @click="closeEdit" v-cloak>
    <!-- 顶部布局 start -->
    <div @click="hideRightMenu" class="layui-col-md12">
        <div class="head-container full-border">

        </div>
    </div>
    <!-- 顶部布局 end -->
    <!-- 左侧功能布局 start -->
    <div @click="hideRightMenu" class="layui-col-lg2 layui-col-md4 layui-col-sm4 layui-col-xs12">
        <div class="content-container center-align">
            <div class="layui-row">
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-primary">
                        <i class="fa fa-share-alt fa-fw"></i> 分享文件
                    </button>
                </div>
            </div>
            <div class="layui-row">
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-primary">
                        <i class="fa fa-list fa-fw"></i> 共享列表
                    </button>
                </div>
            </div>
            <hr/>
            <div class="layui-row">
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-primary">
                        <i class="fa fa-bookmark fa-fw"></i> 我的文档
                    </button>
                </div>
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-primary">
                        <i class="fa fa-clock-o fa-fw"></i> 最近文档
                    </button>
                </div>
            </div>
            <hr/>
            <div class="layui-row">
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-bg-blue">
                        <i class="fa fa-file-word-o fa-fw"></i> Word文档
                    </button>
                </div>
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-bg-green">
                        <i class="fa fa-file-excel-o fa-fw"></i> Excel文档
                    </button>
                </div>
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-bg-red">
                        <i class="fa fa-file-powerpoint-o fa-fw"></i> PPT文档
                    </button>
                </div>
            </div>
            <hr/>
            <div class="layui-row">
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-bg-orange">
                        <i class="fa fa-file-text-o fa-fw"></i> 草稿箱
                    </button>
                </div>
                <div class="item">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-bg-cyan">
                        <i class="fa fa-trash-o fa-fw"></i> 垃圾箱
                    </button>
                </div>
            </div>
            <hr/>
            <div class="layui-row">
                <div class="item">
                    <div class="layui-row">
                        <div class="layui-form-item">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">升级容量</button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">统计</button>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-form-item">
                            <span>容量: 5G</span>
                            <span class="item-label" style="color: #000;">已用: 3G</span>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-progress layui-progress-big">
                            <div class="layui-progress-bar layui-bg-green census" lay-percent="30%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 左侧功能布局 end -->
    <!-- 主体内容 start -->
    <div @click="hideRightMenu" class="layui-col-lg10 layui-col-md8 layui-col-sm8 layui-col-xs12">
        <div class="layui-fluid" style="height: 834px;">
            <div class="layui-row btn-container">
                <button @click="newFolder" type="button" class="layui-btn layui-bg-cyan layui-btn-sm">
                    <i class="fa fa-folder-o fa-fw"></i> 新建文件夹
                </button>
                <button type="button" class="layui-btn layui-bg-cyan layui-btn-sm">
                    <i class="fa fa-file-text-o fa-fw"></i> 新建Office文档
                </button>
                <button @click="uploadFile" type="button" class="layui-btn layui-bg-cyan layui-btn-sm">
                    <i class="fa fa-upload fa-fw"></i> 上传文件
                </button>
                <button @click="backLast" type="button" class="layui-btn layui-btn-sm">
                    <i class="fa fa-reply fa-fw"></i> 返回上一层
                </button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="fa fa-th fa-fw"></i>
                </button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="fa fa-list-ul fa-fw"></i>
                </button>
            </div>
            <div class="layui-row fix-bottom">
                <input type="hidden" v-model="currentDirectoryId">
                <span class="item-label">目录：</span>
                <span class="layui-bread-crumb">
                    <a v-for="directory in directList" class="bread-nav" href="javascript:;"
                       @click="jumpTo(directory.id, '0')">{{ directory.folderName }}</a>
                </span>
            </div>
            <div class="layui-row fix fix-bottom">
                <div v-for="file in fileList" class="layui-inline center-align file-item no-select"
                     @dblclick="jumpTo(file.id, file.fType)" @click.stop="showName(file.id)"
                     @contextmenu.prevent="rightMenu($event, file.id, file.fileName, file.fType)">
                    <i v-if="file.fType == 0" class="fa fa-folder-o fa-fw fa-4x"></i>
                    <i v-if="file.fType == 1" class="fa fa-file-text-o fa-fw fa-4x"></i>
                    <p v-if="editId !== file.id" :title="file.fileName"
                       :class="{'hide-name': file.id !== showId}">{{ file.fileName }}</p>
                    <p @click.stop="nullOperate" v-if="editId === file.id">
                        <input @keyup.esc="cancelEdit" @keyup.enter="closeEdit" type="text" v-model="editName">
                    </p>
                </div>
                <div class="blank-sign no-select" v-if="fileList.length == 0">
                    空文件夹
                </div>
            </div>
            <div class="layui-row item-label fix-position">
                <div id="page-tool"></div>
            </div>
        </div>
    </div>
    <!-- 主体内容 end -->
</div>
<div id="right-menu" v-if="show" class="wrap-ms-right" :style="{ top: top + 'px', left: left + 'px' }" v-cloak>
    <li class="ms-item" @click="download"><i class="fa fa-cloud-download fa-fw"></i>&nbsp; 下载</li>
    <li class="ms-item" @click="moveTo"><i class="fa fa-share fa-fw"></i>&nbsp; 移动到</li>
    <li class="ms-item" @click="copyTo"><i class="fa fa-reply-all fa-fw"></i>&nbsp; 复制到</li>
    <li class="ms-item" @click="rename"><i class="fa fa-pencil-square-o fa-fw"></i>&nbsp; 重命名</li>
</div>
<script src='${ctx}/js/index.js' type="text/javascript"></script>

<%-- 新建文件夹模板 --%>
<script id="newFolder" type="text/html">
    <div class="form-box">
        <form id="newFolderForm" class="layui-form">
            <div class="layui-form-item">
                <label for="folderName" class="layui-form-label">文件夹名称: </label>
                <div class="layui-input-inline">
                    <input id="folderName" name="folderName" class="layui-input" value="{{ d.folderName }}">
                </div>
            </div>
        </form>
    </div>
</script>
<script id="upLoadFileList" type="text/html">
    <div style="padding: 15px;">
        <div class="layui-upload">
            <p>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="selectList">选择多文件</button>
                <button type="button" class="layui-btn layui-btn-sm" id="uploadAction">开始上传</button>
            </p>
            <div class="layui-upload-list">
                <table class="layui-table" lay-size="sm">
                    <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="fileList" style="height: 100%;"></tbody>
                </table>
            </div>
        </div>
    </div>
</script>
</body>
</html>
